<template>
	<view class="login-container">
		<!-- logo图片 -->
		<image class="login-title" src="/static/img/logo1.png"></image>
		<!-- 登录标题 -->
		<view class="login-title">
			手机快捷登录
		</view>


		<!-- 手机号输入框 -->
		<view class="input-group">
			<view class="u-input">
				<text class="txt">手机号</text>
				<input type="number" name="phone" placeholder="请输入您的手机号" maxlength="11" v-model="mobile" />
			</view>
		</view>

		<!-- 验证码输入框 -->
		<view class="input-group">
			<view class="u-input">
				<text class="txt">验证码</text>
				<input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="code" />
			</view>
			<button class="get-code-btn" type="primary" size="mini" plain @click="sendCode">
				获取验证码
			</button>
		</view>

		<!-- 登录按钮 -->
		<view class="login-btn">
			<button type="primary" shape="circle" @click="login">
				登录
			</button>
		</view>

		<!-- 演示账号 -->
		<view class="demo-account">
			<text>*验证码*：12345</text>
		</view>
	</view>
</template>

<script>
	import {
		sendCode,
		login
	} from '@/utils/api'; // 导入api.js中的方法

	export default {
		data() {
			return {
				mobile: '13900139001', // 手机号
				code: '12345' // 验证码
			};
		},
		methods: {
			// 获取验证码
			async sendCode() {
				console.log("我被点击了")
				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				sendCode(this.mobile);
				uni.showToast({
					title: '验证码已发送',
					icon: 'none'
				});
			},

			// 登录
			async login() {
				if (!this.mobile || !this.code) {
					uni.showToast({
						title: '请输入手机号和验证码',
						icon: 'none'
					});
					return;
				}
				try {
					const data = await login(this.mobile, this.code);
					console.log("返回值是", data);
					if("手机号非法"==data){
						uni.showToast({
							title: '手机号不存在，请检查',
							icon: 'none'
						});
						//结束方法
						return;
					}
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
					// 存储用户信息
					uni.setStorageSync('userInfo', data);
					// 这里可以进行页面跳转或其他操作
					uni.switchTab({
						url: '/pages/index/index'
					})
				} catch (error) {
					uni.showToast({
						title: error.message || '登录失败',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.login-container {
		padding: 40px 20px;
		background-color: #f8f8f8;
		height: 80vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.txt {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.login-title {
			font-size: 24px;
			font-weight: bold;
			color: #55aaff;
			margin-bottom: 40px;
		}

		.input-group {
			margin-bottom: 20px;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.u-input {
				background-color: #fff;
				border-radius: 8px;
				padding: 12px;
				flex: 1;
				margin-right: 10px;
			}

			.get-code-btn {
				color: #0a2576;
				border-color: #0a2576;
			}
		}

		.login-btn {
			margin-top: 30px;

			.u-button {
				background-color: #0a2576;
				color: #fff;
				border-radius: 25px;
				height: 50px;
				font-size: 16px;
				width: 80%;
			}
		}

		.demo-account {
			margin-top: 20px;
			font-size: 14px;
			color: #999;
		}

		.placeholder-style {
			color: #ccc;
		}
	}
</style>